<!-- 轮播菜单组件 -->
<template>
  <div class="swiper-container">
    <!-- 左右结构 -->
    <div class="left-content">
      <!-- 左菜单 -->
      <div class="left-menu">
        <div class="left-menu-item" v-for="(item, index) in 13" :key="index">
          <div class="left-menu-item-icon">
            <SvgIcon name="lock" class="icon" color="#BCBCBC"></SvgIcon>
          </div>
          <div class="left-menu-item-title"><span>家具和家电</span></div>
        </div>
      </div>
    </div>

    <!-- 右边的轮播 -->
    <div class="right-swiper">
      <!--       <el-carousel indicator-position="none" height="470" class="swiper-content">
        <el-carousel-item v-for="item in 4" :key="item" class="swiper-item">
          <img
            src="https://resource.saleyee.cn/UploadFiles/Images/2024/202401/42c2ce5d-2635-43a9-8dbb-6c1636a014ae.jpg"
            class="swiper-img"
          />
        </el-carousel-item>
      </el-carousel> -->
      <v-carousel height="400" hide-delimiter-background show-arrows>
        <template v-slot:prev="{ props }">
          <v-btn size="x-large" variant="plain" @click="props.onClick">
            <SvgIcon name="right" color="#FFFFFF"></SvgIcon>
          </v-btn>
        </template>
        <template v-slot:next="{ props }">
          <v-btn size="x-large" variant="plain" @click="props.onClick">
            <SvgIcon name="right" color="#FFFFFF"></SvgIcon>
          </v-btn>
        </template>
        <v-carousel-item v-for="(slide, i) in slides" :key="i">
          <v-sheet :color="colors[i]" height="100%">
            <div class="d-flex fill-height justify-center align-center">
              <div class="text-h2">{{ slide }} Slide</div>
            </div>
          </v-sheet>
        </v-carousel-item>
      </v-carousel>
    </div>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
const colors = ['indigo', 'warning', 'pink darken-2', 'red lighten-1', 'deep-purple accent-4']
const slides = ['First', 'Second', 'Third', 'Fourth', 'Fifth']
</script>

<style lang="scss" scoped>
// 父组件容器
.swiper-container {
  width: 100%;
  height: 500px;
  background-color: var.$background-color;
  display: flex;
  flex-direction: row;

  // 左边的菜单
  .left-content {
    width: 212px;
    height: 477px;
    //  左边菜单子项
    .left-menu-item {
      height: 40px;
      width: 100%;
      border: 1px solid #000000;
      &:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); // 添加阴影
        transition: box-shadow 0.3s ease; // 添加过渡动画（可选）
      }
      display: flex;
      flex-direction: row;
      justify-content: start;
      // 左边菜单子项的图标
      .left-menu-item-icon {
        width: 58px;
        border: 1px solid #000000;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
        .icon {
        }
      }
      // 左边菜单子项的标题
      .left-menu-item-title {
        margin-left: 6px;
        display: flex;
        align-items: center;
        //占剩余
        flex: 1;
      }
    }
  }
  // 右边的内容
  .right-swiper {
    flex: 1;
    height: 600px;
    margin: 10px 10px 0;
    //border: 6px solid rgb(9, 4, 51);
    .swiper-content {
      height: calc(100% - 10px); // 填满父容器

      //border: 1px solid rgb(9, 4, 51);
      background-color: aquamarine;
    }
  }
}
</style>
